import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { ArtistListWrapper } from './style'
import CAtristList from './c-pages/c-artist-list'
import DjRadioHeader from '@/components/djradio-header'
import { shallowEqualApp, useAppSelector } from '@/store'
import CAtristItem from './c-pages/c-artist-item'

interface IProps {
  children?: ReactNode
}

const ArtistList: React.FC<IProps> = () => {
  const { artistList, currentType } = useAppSelector((state) => ({
    currentType: state.artist.currentType,
    artistList: state.artist.artistList
  }),shallowEqualApp)

  return (
    <ArtistListWrapper>
      <DjRadioHeader title={currentType.name} />
      <CAtristList />
      <div className='artist-list'>
        {artistList.map((item,index) => {
          return <CAtristItem key={item.id} index={index} data={item}></CAtristItem>
        })}
      </div>
    </ArtistListWrapper>
  )
}

export default memo(ArtistList)
